<!--
 * @Description: 售后详情
 * @Author: Kerwin
 * @Date: 2025-10-10 10:06:07
 * @LastEditTime: 2025-10-16 11:42:13
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="content">
    <LoadingOverlay
      v-model="loadingSkeleton"
      text="加载中..."
      :size="60"
      color="#ff6c18"
    />
    <view>
      <view class="smallKuai">
        <view>
          <view class="title"> {{ refundText }}</view>
          <view>
            <van-steps
              :active="activeIndex"
              active-color="#FD6135"
              :active-icon="activeIcon"
            >
              <van-step v-for="(bz, index) in stepArr" :key="index">
                {{ bz.desc }}
              </van-step>
            </van-steps>
          </view>
        </view>
        <view style="text-align: center; color: #666; margin-bottom: 40rpx">{{
          tkText
        }}</view>
        <!-- 退款信息 -->
        <view v-if="applyInfoData.refundType != 3">
          <view class="txbox2" style="margin: 20rpx 0">
            <view> 退款合计</view>
            <view class="jqwz"
              >￥<text style="font-size: 48rpx">{{
                moneyUtils.formatPrice(
                  applyInfoData.refundMoney +
                    applyInfoData.refundOtherMoney +
                    applyInfoData.refundFreight
                )
              }}</text></view
            >
          </view>
          <view class="txbox2" style="margin: 20rpx 0">
            <view> 退商品金额</view>
            <view
              >￥<text style="font-size: 40rpx">{{
                applyInfoData.refundMoney
              }}</text></view
            >
          </view>

          <view
            class="txbox2"
            style="margin: 20rpx 0"
            v-if="applyInfoData.refundScore"
          >
            <view> 退服务费</view>
            <view v-if="applyInfoData.refundScore > 0 && shopMode == 4"
              >￥<text style="font-size: 40rpx">{{
                applyInfoData.refundOtherMoney
              }}</text></view
            >
          </view>
          <view class="txbox2" style="margin: 20rpx 0">
            <view> 退{{ enumAll.SHOPMODEL[shopMode] }}</view>
            <view
              >￥<text style="font-size: 40rpx">{{
                applyInfoData.refundScore
              }}</text></view
            >
          </view>
          <view class="txbox2" style="margin: 20rpx 0">
            <view>退款运费</view>
            <view v-if="applyInfoData.refundFreight > 0"
              >￥<text style="font-size: 40rpx">{{
                applyInfoData.refundFreight
              }}</text></view
            >
            <view v-else><text style="font-size: 32rpx">免运费</text></view>
          </view>
        </view>
      </view>

      <!-- 退货信息 -->
      <view
        class="smallKuai"
        v-if="applyInfoData.refundType != 1 && applyInfoData.receiver"
      >
        <u-collapse>
          <u-collapse-item title="填写退货单号信息" :open="true">
            <view>
              <view class="box">
                <view class="collapse header" @click="copy(2)">
                  <view>用户信息</view>
                  <view><u-icon size="40" name="file-text"></u-icon> </view>
                </view>
                <view class="collapse">
                  <view class="text1">用户发件快递类型:</view>
                  <view>
                    <u-input
                      :disabled="!!applyInfoData.expressType"
                      v-model="expressType"
                      type="text"
                      :border="true"
                    />
                  </view>
                </view>

                <view class="collapse">
                  <view class="text1">用户发件快递号:</view>
                  <view
                    ><u-input
                      :disabled="!!applyInfoData.expressNo"
                      v-model="expressNo"
                      type="text"
                      :border="true"
                  /></view>
                </view>

                <view class="mb20">
                  <van-button
                    @click="refundUpdate"
                    round
                    v-if="!applyInfoData.expressNo"
                    plain
                    type="primary"
                    style="width: 100%"
                    >提交信息</van-button
                  >
                </view>
              </view>
              <view class="box">
                <view class="collapse header" @click="copy(1)">
                  <view>退货厂家信息</view>
                  <view><u-icon size="40" name="file-text"></u-icon> </view>
                </view>

                <view class="collapse">
                  <view class="text1">退货收件人名称:</view>
                  <view>{{ applyInfoData.receiver }}</view>
                </view>
                <view class="collapse" style="flex-wrap: wrap">
                  <view class="text1">退货地址:</view>
                  <view>{{ applyInfoData.receiverAddr }}</view>
                </view>
                <view class="collapse">
                  <view class="text1">退货电话:</view>
                  <view>{{ applyInfoData.receiverPhone }}</view>
                </view>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>

      <view class="smallKuai">
        <view style="font-size: 30rpx; color: #666">售后商品：</view>
        <view class="goods">
          <view style="border-radius: 10rpx; margin-right: 20rpx">
            <van-image
              width="150rpx"
              height="150rpx"
              :src="applyGood.skuImage"
              style="border-radius: 30rpx"
            />
          </view>
          <view>
            <view class="jcwz overwz" style="width: 350rpx">{{
              applyGood.name
            }}</view>
            <view class="hswz" style="margin: 20rpx 0">
              规格: {{ applyGood.otherCheckStr }}
            </view>
            <view class="hswz" style="margin: 20rpx 0">
              数量:{{ applyInfoData.refundNum }}
            </view>
          </view>
        </view>
        <view class="m20"
          >售后时间：{{
            dateFormat(
              new Date(applyInfoData.createTime * 1000),
              'yyyy-MM-dd hh:mm'
            )
          }}</view
        >
        <view @click="copy(3)"
          >售后单号：
          <text style="color: #2b85e4">{{ applyInfoData.tradeRefundNo }}</text>
        </view>
      </view>

      <view
        class="footer"
        v-if="
          applyInfoData.refundStatus == 1 || applyInfoData.refundStatus == 2
        "
      >
        <u-button class="btn" @click="show = true" type="primary"
          >取消售后</u-button
        >
      </view>
    </view>
    <u-popup
      v-model="show"
      width="500rpx"
      height="600rpx"
      mode="center"
      border-radius="14"
    >
      <view class="popup">
        <view style="font-size: 30rpx">请填写取消售后原因</view>

        <u-input
          placeholder="请填写取消售后原因，在50个字符内"
          class="m50"
          v-model="remark"
          type="textarea"
          :border="true"
          :height="300"
          maxlength="100"
          auto-height="false"
        />
        <view>
          <u-button @click="cancelApply" type="primary"
            >确认取消</u-button
          ></view
        >
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed, nextTick, h } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { orderApi, userApi, enumAll } from '@/api'
//组件
import LoadingOverlay from '@/components/hy-loadingPage/index.vue'
//工具
import { moneyUtils } from '@/utils/money'
import { dateFormat } from '@/utils/index'
// 初始化数据
const show = ref(false)
const remark = ref('')
const loadingSkeleton = ref(false)
const expressType = ref('')
const expressNo = ref('')
const orderProductSkuId = ref(null)
const shopMode = ref(uni.getStorageSync('shopMode'))
const applyInfoData = ref<any>({})
const applyGood = ref<any>({})
const tkzt = ref(1)
const activeIndex = ref(0)
const activeIcon = ref('success')
const stepArr = ref<any>([
  {
    text: 1,
    desc: '申请售后'
  },
  {
    text: 2,
    desc: '售后中'
  },
  {
    text: 3,
    desc: '售后完成'
  }
  //   {
  //     text: 4,
  //     desc: '申请售后不通过'
  //   },
  //   {
  //     text: 5,
  //     desc: '取消售后'
  //   },
])
// 退款展示文字
const tkText = computed(() => {
  switch (tkzt.value) {
    case 1:
      activeIndex.value = 0
      activeIcon.value = 'underway-o'
      break
    case 2:
      activeIndex.value = 1
      activeIcon.value = 'success'
      break
    case 3:
      activeIndex.value = 2
      activeIcon.value = 'success'
      break
    case 4:
      activeIndex.value = 2
      stepArr.value[2].desc = '售后审核不通过'
      activeIcon.value = 'cross'
      break
    case 5:
      activeIndex.value = 1
      stepArr.value[1].desc = '正在取消售后'
      activeIcon.value = 'underway-o'
      break
    case 6:
      activeIndex.value = 2
      stepArr.value[2].desc = '取消售后成功'
      activeIcon.value = 'success'
      break
  }

  switch (tkzt.value) {
    case 1:
      return '您已提交退款申请，请等待客服处理'
    case 2:
      return '您已提交退款申请，请等待客服处理'
    case 3:
      return '系统已将退款资金交给客服处理，通常情况下，退款会原路退回至您的支付账户，余额会在20分钟内到账，银行卡会在1-3个工作日内到账'
    case 4:
      return '售后审核不通过，已关闭售后申请'
    case 5:
      return '用户已经取消售后，等待客服确认处理'
    case 6:
      return '用户取消售后成功'
  }
})

//复制厂家退货信息
const copy = (type: any) => {
  let str = ''
  if (type == 1) {
    str = `
收件人名称: ${applyInfoData.value.receiver},
收件人电话: ${applyInfoData.value.receiverPhone},
厂家地址: ${applyInfoData.value.receiverAddr}
  `
  } else if (type == 2) {
    if (applyInfoData.value.expressNo == undefined) {
      return uni.showToast({
        icon: 'error',
        title: '用户没有信息,复制失败。'
      })
    }

    str = `
用户发件快递: ${applyInfoData.value.expressType},
用户快递单号: ${applyInfoData.value.expressNo},
 
  `
  } else {
    str = `售后单号：${applyInfoData.value.tradeRefundNo}`
  }

  uni.setClipboardData({
    data: str,
    success: () => {
      uni.showToast({ title: '复制成功' })
    },
    fail: () => {
      uni.showToast({ title: '复制失败', icon: 'none' })
    }
  })
}
const getRefundInfo = async () => {
  loadingSkeleton.value = true
  const { data, code } = await orderApi.refundInfo({
    orderProductSkuId: orderProductSkuId.value,
    detail: true,
    noPaging: true
  })
  if (code == 200) {
    applyInfoData.value = data
    if (data.expressNo) {
      expressNo.value = data.expressNo
    }
    if (data.expressType) {
      expressType.value = data.expressType
    }
    applyGood.value = data.orderProductSku
    tkzt.value = data.refundStatus

    loadingSkeleton.value = false
  } else {
    loadingSkeleton.value = false
    return uni.showToast({
      icon: 'error',
      title: '获取售后详情失败' + code
    })
  }
}
const refundText = computed(() => {
  switch (applyInfoData.value.refundType) {
    case 1:
      return '未收货退款 ：'
    case 2:
      return '退货退款 ：'
    case 3:
      return '换货补发 ：'
    case 4:
      return '不退货仅退款 ：'
  }
})
const refundUpdate = async () => {
  const { data, code } = await orderApi.refundUpdate({
    id: applyInfoData.value.id,
    expressNo: expressNo.value,
    expressType: expressType.value
  })
  if (code == 200) {
    uni.showToast({
      title: '提交成功'
    })
    //刷新
    getRefundInfo()
  } else {
    uni.showToast({
      icon: 'error',
      title: '提交失败' + code,
      duration: 5000
    })
  }
}
const cancelApply = async () => {
  const { data, code, msg } = await orderApi.refundCancelRefund({
    orderProductSkuId: applyGood.value.id,
    remark: remark.value
  })
  if (code == 200) {
    uni.showToast({
      title: '已提交取消售后操作'
    })
    //刷新
    getRefundInfo()
  } else {
    uni.showToast({
      icon: 'error',
      title: '取消售后失败' + msg,
      duration: 5000
    })
  }
  show.value = false
}

// 售后详情

onLoad((optin: any) => {
  orderProductSkuId.value = optin?.orderProductSkuId
  getRefundInfo()
})
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 120rpx;
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  .btn {
    width: 100%;
    height: 120rpx;
  }
}
.popup {
  padding: 20rpx;
  .m50 {
    margin: 50rpx 0;
  }
}
.smallKuai {
  width: 710rpx;
  border-radius: 10rpx;
  background-color: #fff;
  margin: 20rpx auto;
  padding: 25rpx;
  .tickt {
    font-size: 28rpx;
    margin: 20rpx 0;
  }
  .bt {
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  .xhz {
    height: 60rpx;
  }
  .btns {
    width: 100%;
    margin-top: 20rpx;
    padding-left: 500rpx;
    display: flex;
    align-items: center;
    justify-self: end;
  }
  .collapse {
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26rpx;
    .text1 {
      color: #333;
    }
  }

  .box {
    margin-bottom: 20rpx;
    padding: 10rpx;
    border: 2rpx solid #dcdfe6;
    border-radius: 20rpx;
    .header {
      font-size: 28rpx;
      color: #1989fa;
      border-bottom: 2rpx solid #dcdfe6;
    }
  }
}

.goods {
  display: flex;
  margin: 20rpx 0;
  border: 2rpx solid #dcdfe6;
  border-radius: 20rpx;
  padding: 20rpx;
}

.txbox2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jqwz {
  color: red;
  font-size: 32rpx;
}
.mb20 {
  margin-bottom: 20rpx;
}

.title {
  font-size: 30rpx;
  font-weight: 700;
  margin-bottom: 40rpx;
}
.m20 {
  margin: 20rpx 0;
}
</style>
